<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-calendar"></i> 货物
                </el-breadcrumb-item>
                <el-breadcrumb-item>添加货物类型</el-breadcrumb-item>
                <el-button type="primary" @click="onSubmit" style="float: right;">确认添加</el-button>
            </el-breadcrumb>
            
        </div>
        <div class="container clearfix">
                <!-- 货物基本信息 -->
                <div style="width: 49%;float: left;height: 400px;" >
                    <div class="form-box1">
                        <el-form ref="form" :model="form" label-width="80px" style="width: 80%;">
                            <el-form-item label="设备类型" style="margin-top: 15px;">
                                <el-select v-model="form.good_type" placeholder="请选择" style="width: 400px;">
                                    <el-option key="MOT202" label="MOT_U202" value="MOT202"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="货物名称">
                                <el-input v-model="form.name" style="width: 400px;"></el-input>
                            </el-form-item>
                            <el-form-item label="延迟开始">
                                <el-input-number v-model="form.delay" controls-position="right" :min="0" :max="1275" :step="5" step-strictly style="width: 400px;"></el-input-number>
                                <div style="font-size: 5px;float: right;line-height: 3em;margin-top: 5px;">最小步长单位：5分钟<br>范围：1-1275分钟</div>
                            </el-form-item>
                            <el-form-item label="描述">
                                <el-input v-model="form.describe" style="width: 400px;"></el-input>
                            </el-form-item>
                            <el-form-item label="记录间隔">
                                <el-input-number v-model="form.interval" controls-position="right" :min="0" :max="1275" :step="5" step-strictly style="width: 400px;"></el-input-number>
                                <div style="font-size: 5px;float: right;line-height: 3em;margin-top: 5px;">最小步长单位：0.5分钟<br>范围：0.5-127.5分钟</div>
                            </el-form-item>
                        </el-form>
                    </div>
                    <br>
                    <div class="form-box1">
                        <el-form ref="form" :model="form" label-width="120px" style="width: 80%;">
                            <el-form-item label="理想温度范围" style="margin-top: 15px;">
                                <el-select v-model="Idealtemperature.start_f" style="width: 80px;">
                                    <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                        >
                                    </el-option>
                                </el-select>
                                <el-input-number v-model="Idealtemperature.start_number" controls-position="right" :min="0" :max="127.5" :step="0.5" step-strictly placeholder="请选择"></el-input-number>
                                ——
                                <el-select v-model="Idealtemperature.end_f" style="width: 80px;">
                                    <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                        >
                                    </el-option>
                                </el-select>
                                <el-input-number v-model="Idealtemperature.end_number" controls-position="right" :min="0" :max="127.5" :step="0.5" step-strictly></el-input-number>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
                <!-- 货物温度图表 -->
                <div style="width: 48%;float: right;height: 400px;" >
                    <div class="form-box1" style="height: 380px;">
                        温度图表预留位置
                    </div>
                </div>
                <div>
                    nbsp; <br>
                    hello
                </div>

                <!-- 货物报警信息 -->
                <div class="clearfix">
                    <br>
                    <div class="form-box2">
                        <div>
                            <el-tag>报警设置-{{ alarm_1 }}</el-tag>
                            <el-switch
                                style="float: right;"
                                v-model="Report.value_1"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                inactive-text='启用'>
                            </el-switch>
                        </div>
                        <br>
        
                        <div v-if="Report.value_1 != false">
                            <p>报警类型 :</p>
                            <el-select v-model="report_type.o_value_one" placeholder="请选择">
                                <el-option
                                    v-for="item in tem_options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <!-- {{ o_value_one }} -->
                            <br>
                            <br>
                            <div v-if="report_type.o_value_one != '单温度范围-累计事件'">
                                <p>温度范围 :</p>
                                <el-select v-model="form.value.value1" style="width: 80px;">
                                    <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                        >
                                    </el-option>
                                </el-select>
                                <el-input type="text" name="" id="" v-model="temp.temp_1" style="width: 300px;"></el-input>
                                <br>
                            </div>
                            <div v-else>
                                <p>温度范围 :</p>
                                 > &nbsp;<el-input type="text" name="" id="" style="width: 175px;"
                                 v-model="report_start.trf_1"></el-input>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                 < &nbsp;<el-input type="text" name="" id="" style="width: 175px;"
                                 v-model="report_end.trl_1"></el-input>
                                 <br>
                            </div>
                            <br>
                            <p>阈值 :</p>
                            <el-input type="text" name="" id="" style="width: 175px;" v-model="threshold.threshold_1"></el-input>  
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <el-select v-model="dw.time_value_one" placeholder="请选择">
                                <el-option
                                    v-for="item in time_list"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>               
                        </div>
                        <div v-else>
                            <p style="color: red;">未开启报警设置</p>
                        </div>
        
                    </div>
        
                    <div class="form-box2">
                        <div>
                            <el-tag>报警设置-{{ alarm_2 }}</el-tag>
                            <el-switch
                                style="float: right;"
                                v-model="Report.value_2"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                inactive-text='启用'>
                            </el-switch>
                        </div>
                        <br>
        
                        <div v-if="Report.value_2 != false">
                            <p>报警类型 :</p>
                            <el-select v-model="report_type.o_value_two" placeholder="请选择">
                                <el-option
                                    v-for="item in tem_options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <br>
                            <br>
                            <div v-if="report_type.o_value_two != '单温度范围-累计事件'">
                                <p>温度范围 :</p>
                                <el-select v-model="form.value.value2" style="width: 80px;">
                                    <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                        >
                                    </el-option>
                                </el-select>
                                <el-input type="text" name="" id="" v-model="temp.temp_2" style="width: 300px;"></el-input>
                                <br>
                            </div>
                            <div v-else>
                                <p>温度范围 :</p>
                                > &nbsp;<el-input type="text" name="" id="" style="width: 175px;"
                                v-model="report_start.trf_2"></el-input>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                < &nbsp;<el-input type="text" name="" id="" style="width: 175px;"
                                v-model="report_end.trl_2"></el-input>
                                <br>
                            </div>
                            <br>
                            <p>阈值 :</p>
                            <el-input type="text" name="" id="" style="width: 175px;"
                            v-model="threshold.threshold_2"></el-input> 
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  
                            <el-select v-model="dw.time_value_two" placeholder="请选择">
                                <el-option
                                    v-for="item in time_list"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                        <div v-else>
                            <p style="color: red;">未开启报警设置</p>
                        </div>
                        
                    </div>
        
                    <div class="form-box2">
                        <div>
                            <el-tag>报警设置-{{ alarm_3 }}</el-tag>
                            <el-switch
                                style="float: right;"
                                v-model="Report.value_3"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                inactive-text='启用'>
                            </el-switch>
                        </div>
                        <br>
        
                        <div v-if="Report.value_3 != false">
                            <p>报警类型 :</p>
                            <el-select v-model="report_type.o_value_three" placeholder="请选择">
                                <el-option
                                    v-for="item in tem_options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <br>
                            <br>
                            <div v-if="report_type.o_value_three != '单温度范围-累计事件'">
                                <p>温度范围 :</p>
                                <el-select v-model="form.value.value3" style="width: 80px;">
                                    <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                        >
                                    </el-option>
                                </el-select>
                                <el-input type="text" name="" id="" v-model="temp.temp_3" style="width: 300px;"></el-input>
                                <br>
                            </div>
                            <div v-else>
                                <p>温度范围 :</p>
                                > &nbsp;<el-input type="text" name="" id="" style="width: 175px;"
                                v-model="report_start.trf_3"></el-input>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                < &nbsp;<el-input type="text" name="" id="" style="width: 175px;"
                                v-model="report_end.trl_3"></el-input>
                                <br>
                            </div>
                            <br>
                            <p>阈值 :</p>
                            <el-input type="text" name="" id="" style="width: 175px;"
                            v-model="threshold.threshold_3"></el-input>  
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <el-select v-model="dw.time_value_three" placeholder="请选择">
                                <el-option
                                    v-for="item in time_list"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select> 
                        </div>
                        <div v-else>
                            <p style="color: red;">未开启报警设置</p>
                        </div>
        
                    </div>
        
        
                    <br><br>
        
        
                    <div class="form-box2">

                        <div>
                            <el-tag>报警设置-{{ alarm_4 }}</el-tag>
                            <el-switch
                                style="float: right;"
                                v-model="Report.value_4"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                inactive-text='启用'>
                            </el-switch>
                        </div>
                        <br>
                        <div v-if="Report.value_4 != false">
                            <p>报警类型 :</p>
                            <el-select v-model="report_type.o_value_four" placeholder="请选择">
                                <el-option
                                    v-for="item in tem_options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <br>
                            <br>
                            <div v-if="report_type.o_value_four != '单温度范围-累计事件'">
                                <p>温度范围 :</p>
                                <el-select v-model="form.value.value4" style="width: 80px;">
                                    <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                        >
                                    </el-option>
                                </el-select>
                                <el-input type="text" name="" id="" v-model="temp.temp_4" style="width: 300px;"></el-input>
                                <br>
                            </div>
                            <div v-else>
                                <p>温度范围 :</p>
                                > &nbsp;<el-input type="text" name="" id="" style="width: 175px;"
                                v-model="report_start.trf_4"></el-input>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                < &nbsp;<el-input type="text" name="" id="" style="width: 175px;"
                                v-model="trf_4"></el-input>
                                <br>
                            </div>
                            <br>
                            <p>阈值 :</p>
                            <el-input type="text" name="" id="" style="width: 175px;"
                            v-model="threshold.threshold_4"></el-input> 
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <el-select v-model="dw.time_value_four" placeholder="请选择">
                                <el-option
                                    v-for="item in time_list"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>  
                        </div>
                        <div v-else>
                            <p style="color: red;">未开启报警设置</p>
                        </div>
        
                    </div>
        
                    <div class="form-box2">
                        <div>
                            <el-tag>报警设置-{{ alarm_5 }}</el-tag>
                            <el-switch
                                style="float: right;"
                                v-model="Report.value_5"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                inactive-text='启用'>
                            </el-switch>
                        </div>
                        <br>
                        <div v-if="Report.value_5 != false">
                            <p>报警类型 :</p>
                            <el-select v-model="report_type.o_value_five" placeholder="请选择">
                                <el-option
                                    v-for="item in tem_options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <br>
                            <br>
                            <div v-if="report_type.o_value_five != '单温度范围-累计事件'">
                                <p>温度范围 :</p>
                                <el-select v-model="form.value.value5" style="width: 80px;">
                                    <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                        >
                                    </el-option>
                                </el-select>
                                <el-input type="text" name="" id="" v-model="temp.temp_5" style="width: 300px;"></el-input>
                                <br>
                            </div>
                            <div v-else>
                                <p>温度范围 :</p>
                                > &nbsp;<el-input type="text" name="" id="" style="width: 175px;"
                                v-model="report_start.trf_5"></el-input>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                < &nbsp;<el-input type="text" name="" id="" style="width: 175px;"
                                v-model="report_end.trl_5"></el-input>
                                <br>
                            </div>
                            <br>
                            <p>阈值 :</p>
                            <el-input type="text" name="" id="" style="width: 175px;"
                            v-model="threshold.threshold_5"></el-input> 
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
                            <el-select v-model="dw.time_value_five" placeholder="请选择">
                                <el-option
                                    v-for="item in time_list"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select> 
                        </div>
                        <div v-else>
                            <p style="color: red;">未开启报警设置</p>
                        </div>
        
                    </div>
        
                    <div class="form-box2">
                        <div>
                            <el-tag>报警设置-{{ alarm_6 }}</el-tag>
                            <el-switch
                                style="float: right;"
                                v-model="Report.value_6"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                inactive-text='启用'>
                            </el-switch>
                        </div>
                        <br>
                        <div v-if="Report.value_6 != false">
                            <p>报警类型 :</p>
                            <el-select v-model="report_type.o_value_six" placeholder="请选择">
                                <el-option
                                    v-for="item in tem_options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <br>
                            <br>
                            <div v-if="report_type.o_value_six != '单温度范围-累计事件'">
                                <p>温度范围 :</p>
                                <el-select v-model="form.value.value6" style="width: 80px;">
                                    <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                        >
                                    </el-option>
                                </el-select>
                                <el-input type="text" name="" id="" v-model="temp.temp_6" style="width: 300px;"></el-input>
                                <br>
                            </div>
                            <div v-else>
                                <p>温度范围 :</p>
                                > &nbsp;<el-input type="text" name="" id="" style="width: 175px;"
                                v-model="report_start.trf_6"></el-input>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                < &nbsp;<el-input type="text" name="" id="" style="width: 175px;"
                                v-model="report_end.trl_6"></el-input>
                                <br>
                            </div>
                            <br>
                            <p>阈值 :</p>
                            <el-input type="text" name="" id="" style="width: 175px;"
                            v-model="threshold.threshold_6"></el-input>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <el-select v-model="dw.time_value_six" placeholder="请选择">
                                <el-option
                                    v-for="item in time_list"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>   
                        </div>
                        <div v-else>
                            <p style="color: red;">未开启报警设置</p>
                        </div>
                    </div>
                </div>
        </div>
    </div>
</template>

<script>
import { AddCargo } from '../../api/api.js'

export default {
    name: 'addCargo',
    inject:['reload'],
    data() {
        return {
            value:{
                value1:"",
                value2:"",
                value3:"",
                value4:"",
                value5:"",
                value6:"",
            },
            tem_options: [{
                value: '单温上限-单个事件',
                label: '单温上限-单个事件'
            }, {
                value: '单温下限-单个事件',
                label: '单温下限-单个事件'
            }, {
                value: '单温度范围-累计事件',
                label: '单温度范围-累计事件'
            }],
            options: [
                {
                    value: '≤',
                    label: '≤'
                    }, {
                    value: '＜',
                    label: '＜'
                    }, {
                    value: '≥',
                    label: '≥'
                    }, {
                    value: '＞',
                    label: '＞'
                },
            ],
            // 货物添加多需要的数据
            form: {
                name:'胰岛素',         // 名称
                good_type:"",        // 设备类型
                describe: '这是非常好的设备',          // 描述
                delay:'5',//延迟开始
                interval:'5',//间隔
                company_id:"",//所属公司
                Idealtemperature:{}, //理想温度
                Report:{}, // 报警是否启动
                report_type:{},// 报警类型
                threshold:{},//报警类型的阈值(单温)
                dw:{},// 报警阈值的单位(单温)
                report_start:{},// 报警温度范围(开始)
                report_end:{},// 报警温度范围(结束)
                value:{},   // 报警里的温度符号
                temp:{},    //单温度
            },
            //理想温度
            Idealtemperature:{
                start_f:"<",// 开始符号
                end_f:">",// 结束符号
                start_number:"20",// 开始数
                end_number:"3",// 结束数
            },
            // 报警是否启动
            Report:{
                //定义启用按钮参数
                value_1: true,
                value_2: false,
                value_3: false,
                value_4: false,
                value_5: false,
                value_6: false,

            },
            // 报警类型
            report_type:{
                //定义下拉框绑定value值参数
                o_value_one:"",
                o_value_two:"",
                o_value_three:"",
                o_value_four:"",
                o_value_five:"",
                o_value_six:"",
            },
            //报警类型的阈值(单温)
            threshold:{
                threshold_1:"",//报警设置阈值信息输入框数据(一)
                threshold_2:"",//报警设置阈值信息输入框数据(二)
                threshold_3:"",//报警设置阈值信息输入框数据(三)
                threshold_4:"",//报警设置阈值信息输入框数据(四)
                threshold_5:"",//报警设置阈值信息输入框数据(五)
                threshold_6:"",//报警设置阈值信息输入框数据(六)
            },
            // 报警阈值的单位(单温)
            dw:{
                //定义阈值下拉框绑定value值参数
                time_value_one:"",
                time_value_two:"",
                time_value_three:"",
                time_value_four:"",
                time_value_five:"",
                time_value_six:"",
            },
            // 报警温度范围(开始)
            report_start:{
                 //trf代表   temp_range_first  就是左侧的大于某某温度
                trf_1:"",      ////报警设置(单温度范围-累计事件)中大于某某温度的输入框数据(一)
                trf_2:"",      ////报警设置(单温度范围-累计事件)中大于某某温度的输入框数据(二)
                trf_3:"",      ////报警设置(单温度范围-累计事件)中大于某某温度的输入框数据(三)
                trf_4:"",      ////报警设置(单温度范围-累计事件)中大于某某温度的输入框数据(四)
                trf_5:"",      ////报警设置(单温度范围-累计事件)中大于某某温度的输入框数据(五)
                trf_6:"",      ////报警设置(单温度范围-累计事件)中大于某某温度的输入框数据(六)
            },
            // 报警温度范围(结束)
            report_end:{
                //trl代表   temp_range_last  就是右侧的小于某某温度
                trl_1:"",      ////报警设置(单温度范围-累计事件)中小于某某温度的输入框数据(一)
                trl_2:"",      ////报警设置(单温度范围-累计事件)中小于某某温度的输入框数据(二)
                trl_3:"",      ////报警设置(单温度范围-累计事件)中小于某某温度的输入框数据(三)
                trl_4:"",      ////报警设置(单温度范围-累计事件)中小于某某温度的输入框数据(四)
                trl_5:"",      ////报警设置(单温度范围-累计事件)中小于某某温度的输入框数据(五)
                trl_6:"",      ////报警设置(单温度范围-累计事件)中小于某某温度的输入框数据(六)
            },

            //定义报警设置警报参数(主警报1,主警报2等)
            alarm_1:'主警报1',
            alarm_2:'主警报2',
            alarm_3:'主警报3',
            alarm_4:'主警报4',
            alarm_5:'主警报5',
            alarm_6:'主警报6',
            
            //定义阈值下拉框列表
            time_list: [{
                value: '分钟',
                label: '分钟'
            }, {
                value: '小时',
                label: '小时'
            }, {
                value: '天',
                label: '天'
            }],

            //定义报警设置功能中的input框绑定的v-model数据
            temp:{
                temp_1:"",     //报警设置温度范围输入框数据(一)
                temp_2:"",     //报警设置温度范围输入框数据(二)
                temp_3:"",     //报警设置温度范围输入框数据(三)
                temp_4:"",     //报警设置温度范围输入框数据(四)
                temp_5:"",     //报警设置温度范围输入框数据(五)
                temp_6:"",     //报警设置温度范围输入框数据(六)
            }      
            
      };
    },
    methods: {
            // Report:{}, // 报警是否启动
            // report_type:{},// 报警类型
            // threshold:{},//报警类型的阈值(单温)
            // dw:{},// 报警阈值的单位(单温)
            // report_start:{},// 报警温度范围(开始)
            // report_end:{},// 报警温度范围(结束)
            // value:{},   // 报警里的温度符号

        // 添加货物
        onSubmit() {
            var report = Object.values(this.Report)
            var report_type = Object.values(this.report_type)
            var threshold = Object.values(this.threshold)
            var dw = Object.values(this.dw)
            var report_start = Object.values(this.report_start)
            var report_end = Object.values(this.report_end)
            var value = Object.values(this.value)
            var temp = Object.values(this.temp)
            
            let police = []
            for(let i=0;i<report.length;i++){
                if(report[i]){
                    let pdic = {}
                    pdic['police'] = report_type[i]
                    if(pdic['police'] == '单温上限-单个事件'){
                        pdic['begin'] = value[i] + temp[i]
                    }else if(pdic['police'] == '单温下限-单个事件'){
                        pdic['end'] = value[i] + temp[i]
                    }else{
                        pdic['begin'] = '>' + report_start[i]
                        pdic['end'] = '<' + report_end[i]
                    }
                    pdic['value'] = threshold[i] + dw[i]
                    police.push(pdic)
                }
            }
            // name:'胰岛素',         // 名称
            // good_type:"",        // 设备类型
            // describe: '这是非常好的设备',          // 描述
            // delay:'5',//延迟开始
            // interval:'5',//间隔
            // company_id:"",//所属公司
            // Idealtemperature:{}, //理想温度

            // Idealtemperature:{
            //     start_f:"",// 开始符号
            //     end_f:"",// 结束符号
            //     start_number:"",// 开始数
            //     end_number:"",// 结束数
            // },
            let params = {
                    name:this.form.name,
                    equ:this.form.good_type,
                    brief:this.form.describe,
                    delay:this.form.delay,
                    record:this.form.interval,
                    begin:this.Idealtemperature.start_f+this.Idealtemperature.start_number,
                    end:this.Idealtemperature.end_f+this.Idealtemperature.end_number,
                    police:JSON.stringify(police)
                    
                }

            AddCargo(params).then(res=>{
                console.log(res)
                if(res.data.code==200){
                    this.$message('添加成功')
                    this.reload()
                }
            })

            
        }
    }
};
</script>

<style>
    .form-box1 {
        border: honeydew 1px solid;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
        
    }
    .form-box2 {
        border: honeydew 1px solid;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        float: left;
        width: 31%;
        height: 280px; 
        margin: 10px;
        
    }

    .clearfix {
        height: auto;
        *zoom: 1
    }
    .clearfix:before,.clearfix:after {
        content: " ";
        display: table
    }    
    .clearfix:after {
        clear: both
    }
</style>